<!--
 * @Copyright: Copyright (c) 2021 andyten
 * @Description:  动态组件
 * @Author: andy.ten@tom.com
 * @Date: 2021-08-29 16:50:31
 * @LastEditors: andy.ten@tom.com
 * @LastEditTime: 2021-10-21 13:55:49
 * @Version: 1.0.1
-->
<template>
  <div>
    <p class="header-title" :style="{ fontSize: 18 + 'px', fontWeight: 'bold' }">动态组件：</p>
    <!-- 动态组件componet + is方式实现 -->
    <!-- keep-alive 保持组件状态 注释掉keep-alive标签，则不缓存 -->
    <keep-alive>
      <component :is="whichcomp"></component>
    </keep-alive>
    <button @click="choosencomp('Home')">a</button>
    <button @click="choosencomp('Fenlei')">b</button>
    <button @click="choosencomp('My')">c</button>
  </div>
</template>
<script>
//局部定义三个组件
const Home = {
  template: `
  <div>
    {{ msg }}
    <input type="checkbox">测试保持状态</input>
  </div>
  `,
  data() {
    return {
      msg: '这里是home组件',
    };
  },
};
const Fenlei = {
  template: `
  <div>
    {{ msg }}
  </div>
  `,
  data() {
    return {
      msg: '这里是fenlei组件',
    };
  },
};
const My = {
  template: `
  <div>
    {{ msg }}
  </div>
  `,
  data() {
    return {
      msg: '这里是my组件',
    };
  },
};
// mixin 混入demo
var mixin = {
  methods: {
    foo: function() {
      console.log('foo');
    },
    conflicting: function() {
      console.log('from mixin');
    },
  },
};

export default {
  /**
   * 模板字符串中的换行和空格都是会被保留的
   * 变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
   * let name = 'Mike';
   * let age = 27;
   * let info = `My Name is ${name},I am ${age + 1} years old next year.`;
   */
  mixins: [mixin],
  data() {
    return {
      whichcomp: '',
    };
  },
  methods: {
    choosencomp: function(x) {
      this.whichcomp = x;
      //alert(this.whichcomp);
    },
    bar: function() {
      console.log('bar');
    },
    conflicting: function() {
      console.log('from self');
    },
  },
  components: {
    Home,
    Fenlei,
    My,
  },
};
</script>
